<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="基础配置" name="first">
      <el-form v-model="form" label-width="120px" size="mini">
        <el-form-item label="流程图名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="审批类型">
          <el-radio-group v-model="extended.setType">
            <el-radio :label="1">指定人员</el-radio>
            <el-radio :label="2">用户自选</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择用户">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="$refs.UserSelectList.open()">添加</el-button>
          <UserSelectList ref="UserSelectList" v-model="extended"></UserSelectList>
        </el-form-item>
        <el-form-item label="多实例">
          <el-switch :value="multiInstance" @change="multiInstanceChange"></el-switch>
        </el-form-item>
        <MultiInstance
          v-if="multiInstance"
          :element="form.loopCharacteristics"
          ref="multiInstance"></MultiInstance>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="监听器" name="second">

    </el-tab-pane>
  </el-tabs>
</template>
<script>
    import mixins from './mixins'
    import MultiInstance from './UserTask/MultiInstance'
    import UserSelectList from './common/UserSelectList'
    export default {
        inject: ['bpmnModeler', 'modeling'],
        mixins: [mixins],
      components:{
        MultiInstance,
          UserSelectList
      },
        data() {
            return {
                activeName: 'first',
                extended:{
                    setType:1
                },
                form: {
                    name: '',
                    loopCharacteristics: null,
                    extensionElements: [],
                },
            }
        },
        computed: {
            customElements() {
                return this.form.extensionElements.find(x => {
                    return x.$type === 'flowable:Extended'
                })
            },
            multiInstance() {
                return !!this.form.loopCharacteristics
            }
        },
        watch:{
            'form.extensionElements'(n){
                this.initExtended(n)
            },
            extended:{
                deep:true,
                handler:function(newV,oldV){
                    if(this.customElements&& this.inited){
                        this.modeling().updateModdleProperties(this.element,this.customElements,{body:JSON.stringify(newV)})
                    }
                }
            }
        },
        methods: {
            multiInstanceChange(val) {
                if (val) {
                    this.form.loopCharacteristics = this.bpmnFactory().create('bpmn:MultiInstanceLoopCharacteristics')
                    this.form.loopCharacteristics.$parent = this.element
                    this.form.loopCharacteristics.collection = '${userTaskService.getUserList(execution)}'
                    this.form.loopCharacteristics.elementVariable = 'singleUser_'
                    this.changeSetType(this.extended.setType)
                } else {
                    this.form.loopCharacteristics = null
                }
            },
            initExtended(n){
                this.inited = false
                const data = this.customElements
                if(!data){
                    //默认添加拓展属性
                    const extended =  this.bpmnFactory().create('flowable:Extended', {body:JSON.stringify(this.extended)})
                    n.push(extended)
                }else {
                    this.extended = JSON.parse(data.get('body'))
                }
                this.$nextTick(()=>{
                    this.inited=true
                })
            },
            changeSetType(type) {
                switch (type) {
                    case 1:
                    case 2:
                        this.form.assignee = '${userTaskService.getUser(execution)}'
                        if(this.multiInstance){
                            this.$refs.multiInstance.form.collection = '${userTaskService.getUserList(execution)}'
                            this.$refs.multiInstance.form.elementVariable = 'singleUser_'
                        }
                        break
                    case 3:
                        this.form.assignee = ''
                        if(this.multiInstance){
                            this.$refs.multiInstance.form.collection = ''
                            this.$refs.multiInstance.form.elementVariable = ''
                        }
                        break
                }
            }
        },
        created(){
            this.init('form',this.form)
            this.initExtended(this.form.extensionElements)
        },
        mounted() {

        },
    }
</script>
<style lang="scss" scoped>
    .el-form {
        padding-right: 10px;

        .el-form-item__label {
            font-weight: 700;
        }
    }
</style>
